<template>
  <div class="detail">
    <div class="add_con">
      <div class="box_info one_line">
        <div class="title_bold">关联单据：</div>
        <div class="box_con">
          <div class="con_detail" v-if="auditForm.associatedForm">
            {{ auditForm.associatedFormName }}
          </div>
        </div>
      </div>
      <div class="self_info">
        <div class="title_bold">基本信息</div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">部门</div>
            <div class="right">{{ auditForm.orgName }}</div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">姓名</div>
            <div class="right">{{ auditForm.userName }}</div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">职务</div>
            <div class="right">{{ auditForm.post }}</div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">证明人</div>
            <div class="right">
              <template v-if="auditForm.certifierList && auditForm.certifierList.length">
                <span v-for="(item, index) in auditForm.certifierList" :key="item.certifierId" class="partner">
                  {{ item.certifier }}
                  <span v-if="index < auditForm.certifierList.length - 1">、</span>
                </span>
              </template>
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">交通工具</div>
            <div class="right">
              <van-radio-group v-model="auditForm.transportation" direction="horizontal" disabled>
                <van-radio name="1">公共交通-火车/高铁/客车/飞机</van-radio>
                <van-radio name="2">公车</van-radio>
                <van-radio name="3">平台租赁</van-radio>
                <van-radio name="4">其他(请注明)</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
        <div class="info_line" v-if="auditForm.transportation === '4'">
          <div class="grid_info">
            <div class="left">其他说明</div>
            <div class="right info_cell">
              {{ auditForm.transportationRemark }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info info_input">
            <div class="left">出差事由</div>
            <div class="right">
              <!-- <van-field
                class="scroe_input"
                v-model="auditForm.reimburseReason"
                rows="4"
                autosize
                type="textarea"
                :placeholder="'请输入'"
                readonly /> -->
              {{ auditForm.reimburseReason }}
            </div>
          </div>
        </div>
      </div>
      <div class="box_info">
        <div class="title_bold">出差行程</div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">起程时间</div>
            <div class="right info_cell">
              {{ auditForm.startTime && auditForm.startTime.slice(0, -3) }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">离开时间</div>
            <div class="right info_cell">
              {{ auditForm.endTime && auditForm.endTime.slice(0, -3) }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">起程地点</div>
            <div class="right info_cell">
              {{ auditForm.startPlace }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">离开地点</div>
            <div class="right info_cell">
              {{ auditForm.leavePlace }}
            </div>
          </div>
        </div>
      </div>
      <div class="box_info info_bill">
        <div class="title_bold">费用明细</div>
        <div class="info_line line_tit">
          <div class="grid_info">
            <div class="left">车船费</div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info info_side">
            <div class="left">单据张数</div>
            <div class="right info_cell">
              {{ auditForm.expenseList[0].billCount }}
            </div>
          </div>
          <div class="grid_info">
            <div class="left">金额</div>
            <div class="right info_cell">{{ auditForm.expenseList[0].amount }}</div>
          </div>
        </div>
        <div class="info_line line_tit">
          <div class="grid_info">
            <div class="left">住宿费</div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info info_side">
            <div class="left">单据张数</div>
            <div class="right info_cell">
              {{ auditForm.expenseList[1].billCount }}
            </div>
          </div>
          <div class="grid_info">
            <div class="left">金额</div>
            <div class="right info_cell">
              {{ auditForm.expenseList[1].amount }}
            </div>
          </div>
        </div>
        <div class="info_line line_tit">
          <div class="grid_info">
            <div class="left">伙食补助/交通补助</div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info info_side">
            <div class="left">天数</div>
            <div class="right info_cell">
              {{ auditForm.expenseList[2].dayCount }}
            </div>
          </div>
          <div class="grid_info">
            <div class="left">金额</div>
            <div class="right info_cell">
              {{ auditForm.expenseList[2].amount }}
            </div>
          </div>
        </div>
        <div class="info_line line_tit">
          <div class="grid_info">
            <div class="left">其他费用</div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info info_side">
            <div class="left">单据张数</div>
            <div class="right info_cell">
              {{ auditForm.expenseList[3].billCount }}
            </div>
          </div>
          <div class="grid_info">
            <div class="left">总金额</div>
            <div class="right info_cell">
              {{ auditForm.expenseList[3].amount }}
            </div>
          </div>
        </div>
      </div>
      <div class="box_info">
        <div class="title_bold">合计</div>
        <div class="info_line info_sum">
          <div class="grid_info info_side">
            <div class="left">单据张数</div>
            <div class="right info_cell">
              {{ auditForm.billCount }}
            </div>
          </div>
          <div class="grid_info">
            <div class="left">总金额</div>
            <div class="right info_cell">
              {{ auditForm.amountTotal }}
            </div>
          </div>
        </div>
      </div>

      <div class="box_info box_bill" v-if="billAmount">
        <div class="title_bold">发票信息：</div>
        <div class="info_line" v-if="auditForm.expenseList[0].billCount">
          <div class="grid_info">
            <div class="left">车船费：</div>
            <div class="right">
              <ImgUploadImg v-bind:albumList.sync="auditForm.fareList" accept=".jpeg,.png,.jpg" :entry="false" />
            </div>
          </div>
        </div>
        <div class="info_line" v-if="auditForm.expenseList[1].billCount">
          <div class="grid_info">
            <div class="left">住宿费：</div>
            <div class="right">
              <ImgUploadImg v-bind:albumList.sync="auditForm.hotelList" accept=".jpeg,.png,.jpg" :entry="false" />
            </div>
          </div>
        </div>
        <div class="info_line" v-if="auditForm.expenseList[3].billCount">
          <div class="grid_info">
            <div class="left">其他费用：</div>
            <div class="right">
              <ImgUploadImg
                v-bind:albumList.sync="auditForm.otherExpenseList"
                accept=".jpeg,.png,.jpg"
                :entry="false" />
            </div>
          </div>
        </div>
      </div>
      <div class="box_info one_line column_line">
        <div class="title_bold">附件：</div>
        <div class="box_con">
          <ImgUpload v-bind:albumList.sync="auditForm.enclosureList" :entry="false" />
        </div>
      </div>
      <van-collapse class="check_main" v-model="activeName2" accordion>
        <van-collapse-item name="0">
          <template #title>
            <div class="type_title_bold">审批流程</div>
          </template>
          <expenseSteps :approveFlow="approveFlow" />
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="check_btn" v-if="getBtnApprove()">
      <van-button size="small" type="info" @click="approvalData('1')">通过</van-button>
      <van-button size="small" type="danger" @click="approvalData('2')">不通过</van-button>
      <van-button size="small" type="danger" @click="approvalData('3')">退回</van-button>
    </div>
    <div class="check_btn" v-if="getBtnEdit()">
      <van-button size="small" type="danger" @click="approvalData('4')" v-if="detailInfo.canRevoke === '1'">
        撤回
      </van-button>
      <van-button size="small" type="danger" @click="approvalData('5')" v-if="detailInfo.isCanZZ === '1'">
        终止
      </van-button>
    </div>
    <van-dialog
      v-model="dialogShow"
      title="审批意见"
      show-cancel-button
      @confirm="submit()"
      @cancel="dialogShow = false"
      :before-close="onBeforeClose">
      <van-field
        type="textarea"
        v-model="suggest"
        placeholder="请输入审批意见"
        autofocus
        class="sugg"
        rows="4"
        maxlength="50"
        show-word-limit />
    </van-dialog>
  </div>
</template>

<script>
import { getTripReimburseDetail, approveFormExpense } from '@api/api-dailyManage.js'
import expenseSteps from './expenseSteps.vue'
import ImgUpload from '@com/ImgUpload'
import ImgUploadImg from '@com/ImgUploadImg'
import moment from 'moment'
export default {
  name: 'expenseDetail',
  components: {
    expenseSteps,
    ImgUpload,
    ImgUploadImg,
  },
  props: {},
  data() {
    return {
      moment: moment,
      userInfo: JSON.parse(localStorage.userInfo),
      queryInfo: this.$route.query,
      activeName2: '', // 审批流程
      approveFlow: {},
      detailInfo: {},
      dialogShow: false,
      suggest: '',
      auditForm: {
        id: '',
        formTitle: '差旅费报销单',
        formType: '2',
        certifier: '',
        certifierId: '',
        billCount: '',
        transportation: '',
        transportationRemark: '',
        reimburseReason: '',
        startTime: '',
        endTime: '',
        startPlace: '',
        leavePlace: '',
        expenseList: [
          {
            amount: '',
            billCount: '',
            expenseType: '1',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '2',
          },
          {
            amount: '',
            dayCount: '',
            expenseType: '3',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '4',
          },
        ],
        amountTotal: '',
        userId: localStorage.userId,
        userName: JSON.parse(localStorage.userInfo).userName,
        orgId: JSON.parse(localStorage.userInfo).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.userInfo).loginPostInfo.orgName,
        post: JSON.parse(localStorage.userInfo).loginPostInfo.postName,
        enclosureList: [], // 附件
        fareList: [], // 车船费
        hotelList: [], // 住宿费
        otherExpenseList: [], // 其他费用
        associatedForm: '', // 关联单据ID
        associatedFormName: '',
      },
      approveType: '',
    }
  },
  computed: {
    billAmount() {
      if (
        this.auditForm.expenseList[0].billCount ||
        this.auditForm.expenseList[1].billCount ||
        this.auditForm.expenseList[3].billCount
      ) {
        return true
      } else {
        return false
      }
    },
  },
  watch: {},
  created() {
    this.getTripReimburseDetail()
  },
  mounted() {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    approvalData(type) {
      this.approveType = type
      this.suggest = ''
      if (['2', '3'].includes(type)) {
        this.dialogShow = true
      } else if (['4', '5'].includes(type)) {
        const str = type === '4' ? '确认撤回该报销单吗？' : '确认终止该报销单吗？'
        this.$dialog
          .confirm({
            message: str,
          })
          .then(() => {
            this.submit()
          })
          .catch(() => {})
      } else {
        this.submit()
      }
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    getTripReimburseDetail() {
      getTripReimburseDetail({
        id: this.$route.query.id,
      }).then(res => {
        if (res.code === 0) {
          this.detailInfo = res.data
          this.auditForm = res.data
          this.approveFlow = {
            id: this.detailInfo.id,
            processInstanceId: this.detailInfo.processInstanceId,
          }
        }
      })
    },
    submit() {
      if (['2', '3'].includes(this.approveType) && this.suggest.trim().length === 0) {
        return this.$toast.fail('请填写审批意见')
      }
      approveFormExpense({
        content: this.suggest,
        id: this.detailInfo.id,
        processInstanceId: this.detailInfo.processInstanceId,
        status: this.approveType,
        taskId: this.detailInfo.taskId,
      }).then(res => {
        if (res.code === 0) {
          this.dialogShow = false
          this.$toast.success('审批成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    },
    onBeforeClose(action, done) {
      if (action === 'confirm') {
        return done(false)
      } else {
        return done()
      }
    },
    getBtnApprove() {
      if (
        (this.queryInfo.firstType === '4' || !this.queryInfo.firstType || this.queryInfo.operate === '1') &&
        this.detailInfo.saveStatus === '1' &&
        this.detailInfo.status === '0'
      ) {
        return true
      } else {
        return false
      }
    },
    getBtnEdit() {
      if (
        this.detailInfo.saveStatus === '1' &&
        (this.detailInfo.canRevoke === '1' || this.detailInfo.isCanZZ === '1') &&
        (this.queryInfo.firstType === '2' || this.queryInfo.operate === '2')
      ) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.detail {
  background-color: #f5f5f5;
  height: 100%;
}
.add_con {
  padding: 7px 12px 60px;
  background-color: #f5f5f5;
  font-size: 13px;
  color: #333333;
  width: 100%;
  overflow-x: hidden;
  min-height: 100%;
  .self_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 10px;
    .add-box {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      .add-one {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #86642c;
        font-size: 14px;
        padding: 7px 15px;
        border: 1px solid #86642c;
        border-radius: 5px;
        span {
          margin-left: 7px;
          font-weight: 600;
        }
      }
    }
  }
  .title_bold {
    font-weight: 800;
    font-size: 15px;
  }
  .info_line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .grid_info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid #d7d7d7;
      .left {
        font-size: 14px;
        width: 65px;
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
        color: #333333;
        text-align: center;
      }
      .right {
        flex: 1;
        text-align: right;
        word-break: break-all;
        white-space: pre-wrap;
        .partner {
          display: inline-block;
        }
      }
    }
    .info_side {
      margin-right: 10px;
    }
  }
  .van-radio-group {
    .van-radio {
      margin-left: 20px;
      margin-bottom: 7px;
    }
  }
  .info_cell {
    /deep/.van-cell {
      display: flex;
      align-items: center;
      font-size: 12px;
      .van-icon-arrow {
        display: flex;
        align-items: center;
      }
    }
    /deep/.van-cell__value {
      text-align: right;
      padding-right: 10px;
      color: #999999;
    }
    /deep/.van-field__control {
      text-align: right;
    }
  }
  .info_input {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    .right {
      // border: 1px solid #efefef;
      margin-top: 10px;
      width: 100%;
      text-align: left !important;
      .scroe_input {
        padding: 0 5px;
        width: 100%;
        height: auto;
        line-height: 20px;
        font-size: 12px;
        resize: none;
      }
    }
  }

  .box_info {
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 15px;
    .info_radio {
      .left {
        width: 100px;
      }
      .van-radio-group {
        justify-content: flex-end;
        .van-radio {
          margin-left: 20px;
          margin-bottom: 0;
        }
      }
    }
    .info_sum {
      .grid_info {
        .left {
          min-width: 65px;
        }
        max-width: 50%;
      }
    }
  }
  .info_bill {
    .line_tit {
      .grid_info {
        border-bottom: 0;
        padding-bottom: 0;
        .left {
          width: 100%;
          background-image: none;
          text-align: left;
          margin-left: 14px;
          position: relative;
        }
        .left::before {
          content: '◆';
          position: absolute;
          // width: 5px;
          // height: 100%;
          // background-color: #e5d2b4;
          left: -12px;
          color: #e5b568;
          font-size: 18px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .one_line {
    display: flex;
    align-items: center;
    .box_con {
      flex: 1;
      position: relative;
      .con_btn {
        border: 1px dashed #d0d7e0;
        color: #1989fa;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          margin-right: 10px;
        }
      }
      .con_detail {
        border: 1px dashed #d0d7e0;
        padding: 5px;
        width: 100%;
      }
      .con_del {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #999999;
      }
    }
  }
  .box_bill {
    .grid_info {
      align-items: flex-start;
      flex-direction: column;
      .left {
        width: 100%;
        background-image: none;
        text-align: left;
        margin-left: 14px;
        position: relative;
        font-weight: 600;
      }
      /deep/.right {
        width: 100%;
        .previews {
          justify-content: start;
        }
        .up_li {
          width: 31% !important;
          height: 75px !important;
          margin-right: 2%;
        }
      }
    }
  }
  .column_line {
    flex-wrap: wrap;
    .box_con {
      width: 100%;
    }
  }
  // 底部
}
.check_main {
  background-color: #ffffff;
  box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
  margin-top: 10px;
  border-radius: 5px;
  .type_title_bold {
    font-size: 15px !important;
    color: #333333;
    font-weight: 600;
  }
}
.check_btn {
  margin-top: 10px;
  background-color: #ffffff;
  padding: 5px 15px;
  box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  /deep/.van-button {
    height: 32px;
  }
}
/deep/.van-dialog__content {
  padding: 12px;
  .sugg {
    border: 1px solid #efefef;
    padding: 0 5px;
    width: 100%;
    height: auto;
    line-height: 20px;
    font-size: 12px;
    resize: none;
  }
}
</style>
